<template>
  <el-container style="width: 90%;margin:0px auto">
    <!--设置一个进度条-->
    <el-header style="width:80% ;margin:20px auto">
      <el-steps :active="1">
        <el-step title="选择座位" description=""></el-step>
        <el-step title="订单提交" description=""></el-step>
        <el-step title="订单生成" description=""></el-step>
        <el-step title="影院取票观影" description=""></el-step>
      </el-steps>
    </el-header>
    <el-main>
          <!--倒计时的实现-->
          <el-row class="shot-down">
                 <el-col :span="5" :offset="1" style="margin-top: 10px">
                       <img src="../../../../static/order/sdown.png">
                 </el-col>
                 <el-col :span="17">
                    <el-row style="margin-top: -20px;margin-left: -90px">请在<span>{{m}}</span>分钟，<span>{{s}}</span>秒之内中支付</el-row>
                     <el-row style="margin-top: -50px;margin-left: -90px">一旦倒计时结束，就不可以选择</el-row>
                 </el-col>
          </el-row>
           <!--订单的详细信息-->
             <el-row>
               <el-card class="box-card">
                     <el-col :span="4">
                            <img :src="detailOrder.filmPic" width="150px" height="100px" style="margin-left: 20px">
                     </el-col>
                     <el-col :span="4" :offset="1">
                       <el-row style="margin-top: 15px">
                       <el-col :span="12">订单编号：</el-col>
                       <el-col :span="10">{{order.orderCode}}</el-col>
                     </el-row>
                       <el-row style="margin-top: 15px">
                         <el-col :span="12">联系人：</el-col>
                         <el-col :span="10">{{order.userName}}</el-col>
                       </el-row>
                       <el-row style="margin-top: 15px">
                         <el-col :span="12">联系方式：</el-col>
                         <el-col :span="10">{{order.orderPhone}}</el-col>
                       </el-row>
                     </el-col>
                      <el-col :span="5" :offset="1">
                        <el-row style="margin-top: 15px">
                          <el-col :span="12">电影名：</el-col>
                          <el-col :span="12">{{detailOrder.filmName}}</el-col>
                        </el-row>
                        <el-row style="margin-top: 15px">
                          <el-col :span="8">座位：</el-col>
                          <el-col :span="16">{{detailOrder.seat}}</el-col>
                        </el-row>
                        <el-row style="margin-top: 15px">
                          <el-col :span="12">影院名称：</el-col>
                          <el-col :span="12">{{detailOrder.cinemaName}}</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="5" >
                        <el-row style="margin-top: 15px">
                          <el-col :span="10">播放时间：</el-col>
                          <el-col :span="14">{{detailOrder.playTime}}</el-col>
                        </el-row>
                        <el-row style="margin-top: 15px">
                          <el-col :span="14">电影票数量：</el-col>
                          <el-col :span="3">{{detailOrder.numbers}}</el-col>
                        </el-row>
                        <el-row style="margin-top: 15px">
                          <el-col :span="12">票的单价：</el-col>
                          <el-col :span="12">{{detailOrder.filmPrice}}</el-col>
                        </el-row>
                      </el-col>
                      <el-col :span="4" >
                 <el-row style="margin-top: 15px">
                   <el-col :span="12">播放厅：</el-col>
                   <el-col :span="12">{{detailOrder.playHall}}</el-col>
                 </el-row>
                 <el-row style="margin-top: 15px">
                   <el-col :span="12">支付方式：</el-col>
                   <el-col :span="12">{{order.payMethod}}</el-col>
                 </el-row>
               </el-col>
               </el-card>
             </el-row>
    </el-main>
           <el-footer>
              <el-row style="text-align: right;margin-right: 50px;margin-bottom: 40px;margin-top: 30px;font-size: 20px;color: red">支付总价：{{order.orderAccount}}</el-row>
               <el-row style="text-align: right">
                  <el-button @click="toCreateCode">立即支付</el-button>
                  <el-button @click="toCancelOrder">取消支付</el-button>
               </el-row>
           </el-footer>
      </el-container>
</template>

<script>
    export default {
        name: "CreateOrder",
        data(){
          return{
             /*分钟的数据*/
              m:15,
             /*秒的数据*/
              s:0,
            /*设置时间的数据*/
             time:900,
            /*定义一个订单的实体*/
            order:{
                id:0,
                orderCode:'100000000000',
                orderCreateTime:'',
                userName:'刘永生',
                orderAccount:1,
                 orderPhone:'15993309785',
                 preferenceLevel:0,
                 orderState:2,
                  userId:1,
                 payMethod: '微信支付'
            },
           /*订单详情的数据*/
            detailOrder:{
                 filmName:'叶问',
                  id:1,
                  account:0,
                  showCode:1,
                  orderCode:'',
                 filmPic:'',
                 filmPrice:'40.0元',
                 cinemaName:'千峰影院',
                 numbers:1,
                 playTime:'2019-12-24 8:30',
                 playHall:'1号厅',
                 seat:'7排六座'
            },
            /*定义一个实体数据*/
          }
        },
        methods:{
          toCreateCode(){
                 var orderCode  = this.$route.params.orderCode;
                 console.log(orderCode)
                 this.$router.push({name:'tocreatecode',params:{'orderCode':orderCode}})
           },
           toCancelOrder(){
                var vm = this
                /*默认状态 0为未支付，1为支付成功，而2为历史订单*/
                  var order = {
                       orderCode:this.$route.params.orderCode,
                        orderState:2
                  }
                 this.axios({
                       method:'post',
                       url:'http://localhost:80/api/order/update',
                       data:order
                 }).then(function (res) {
                       if (res.data.success){
                            /*先弹出用户取消成功*/
                         vm.$message({
                           message: '恭喜你，取消成功',
                           type: 'success'
                         });
                         //2.2秒以后跳转 首页
                         setTimeout(function () {
                           vm.$router.push("/index");
                         },2000);
                       }
                 })
           },
          renderCreateOrder(){
                var vm = this;
                 this.axios({
                       url:'http://localhost:80/api/order/query/'+this.$route.params.orderCode,
                 }).then(function (res) {
                         if(res.data.success){
                                vm.order = res.data.data.order;
                                console.log(vm.order)
                                vm.detailOrder = res.data.data.detailOrder;
                                console.log(vm.detailOrder)
                         }
                 })
          }
          /*
             renderCreateOrder(time){
                 this.m = parseInt(time/60);
                 this.s =  time%60;
                 this.time = time - 1;
                 setTimeout(this.renderCreateOrder(this.time),1000)
             }*/
        },
      created() {
           /*this.renderCreateOrder(this.time)*/
        this.renderCreateOrder();
      }
    }
</script>

<style scoped>
     /*倒计时的样式*/
    .shot-down{
        height: 90px;
        border-radius: 10px;
        line-height: 90px;
        background-color: orange;
    }
  /*对倒计时的文字样式*/
   span{
       font-size: 20px;
       color: red;
   }
  .box-card{
    width: 100%;
    height: 170px;
    font-size: 17px;
    font-family: 华文楷体;
    border-radius: 15px;
    margin-top: 50px;
  }
</style>
